<template>
  <struc header footer>
    <head-nav-bar slot="header" title="我的"></head-nav-bar>
    <div slot="main" ref="main">
      <tabs-nav
        ref="tabsZj"
        v-model="tab_index"
        :tabs="tabs"
        nav-key="text"
      ></tabs-nav>

      <tabs-cont
        v-model="tab_index"
        :tabs="tabs"
        :width="cont_width"
        :height="cont_height"
      >
        <list-load
          slot-scope="{data, index}"
          :width="cont_width"
          :height="cont_height"

          v-model="tabs[index].loading"
          :immediate-check="false"
          :offset="1200"
          :finished="tabs[index].finished"
          finished-text="没有更多了"
          @load="onLoad(tab_index)"
        >
          <div class="tab-item">
            <div class="text-num" v-for="item in data.list">{{index}}-{{item}}</div>
          </div>
        </list-load>
      </tabs-cont>
    </div>
    <foot-nav slot="footer" :navIndex="3"/>
  </struc>
</template>
<script>
  import tabsNav from '../../components/tabs-nav.vue'
  import tabsCont from '../../components/tabs-cont.vue'
  import listLoad from '../../components/list-load.vue'

  export default {
    components: {
      tabsNav,
      tabsCont,
      listLoad
    },
    data() {
      return {
        tabs: [
          {
            id: 0,
            text: '关注',
            list: [],
            page: 0,
            finished: false,
            loading: false
          }, {
            id: 1,
            text: '推荐',
            list: [],
            page: 0,
            finished: false,
            loading: false
          }, {
            id: 2,
            text: '老铁666',
            list: [],
            page: 0,
            finished: false,
            loading: false
          }, {
            id: 3,
            text: '今日头条',
            list: [],
            page: 0,
            finished: false,
            loading: false
          }, {
            id: 4,
            text: '98k',
            list: [],
            page: 0,
            finished: false,
            loading: false
          }, {
            id: 5,
            text: '大吉大利',
            list: [],
            page: 0,
            finished: false,
            loading: false
          }, {
            id: 6,
            text: '晚上吃鸡',
            list: [],
            page: 0,
            finished: false,
            loading: false
          }, {
            id: 7,
            text: '这波操作',
            list: [],
            page: 0,
            finished: false,
            loading: false
          }, {
            id: 8,
            text: '有点意思',
            list: [],
            page: 0,
            finished: false,
            loading: false
          }, {
            id: 9,
            text: 'nice',
            list: [],
            page: 0,
            finished: false,
            loading: false
          }, {
            id: 0,
            text: 'ig牛',
            list: [],
            page: 0,
            finished: false,
            loading: false
          }
        ],
        tab_index: 3,

        cont_width: '375px',
        cont_height: '375px'
      }
    },
    created() {
      this.tabs.forEach(mm => {
        let num = Math.floor(Math.random() * 30 + 10)

        for (let i = 0; i < num; i++) {
          mm.list.push(i)
        }
      })
    },
    mounted() {
      this.$nextTick(() => {
        setTimeout(() => {
          let main = this.$refs.main.parentNode
          this.cont_width = main.clientWidth + 'px'
          this.cont_height = main.clientHeight - 2 - this.$refs.tabsZj.$el.clientHeight + 'px' // main 加了上下边框，所以减2
        })
      })
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      onLoad(index) {
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.tabs[index].list.push(this.tabs[index].list.length)
          }
          this.tabs[index].loading = false
        }, 1000)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .text-num {
    margin: 10px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 200px;
  }
</style>
